<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="front-common :: commonCss(~{::title},~{},~{},~{::style})">
    <title>我的简历</title>
    <style type="text/css">
        .container{
            display: flex;
            justify-content: center;
            align-items: flex-start;
            border: #f8f8f8 30px solid;
            padding: 0;
        }
        .content{
            background-color: #ffffff;
            min-height: 75vh;
            width: 100%;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">

    <div th:replace="front-common::header('')"></div>

    <div class="layui-layout-body" style="margin-top: 50px;background-color: #f8f8f8;">
        <div class="layui-container container">
            <div class="content">
                <div class="layui-fluid" >
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                        <legend>我的简历</legend>
                    </fieldset>
                    <form class="layui-form layui-form-pane" id="resumeForm" lay-filter="resumeForm" style="padding: 0 60px 0 60px;">
                        <div class="layui-form-item" style="display: flex;flex-direction: column;align-items: center;justify-content: flex-start;">
                            <img th:src="@{/pic/photo/{photo}(photo=${resumeInfo==null?'default.png':resumeInfo.photo})}"
                                 id="showImg" class="layui-nav-img" style="width: 120px;height: 120px;margin-right: 0;margin-bottom: 5px;">
                            <button class="layui-btn" type='button' value='' onclick='javascript:$("#img").click();'>上传照片</button>
                            <input id="showImgName" type='text' readonly style="border: none;"/>
                            <input name="imgFile" id="img" placeholder="修改照片" type="file"
                                   accept="image/jpeg, image/png" maxFileCount=1 style="display:none" onchange='onHiddenFile();'/>
                        </div>
                        <div class="layui-card">
                            <div class="layui-card-body">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">应聘岗位</label>
                                    <div class="layui-input-inline" style="width: 20vw;">
                                        <input name="job" lay-verify="required" type="text" autocomplete="off" class="layui-input" >
                                    </div>

                                    <label class="layui-form-label">期望薪资</label>
                                    <div class="layui-input-inline" style="width: 20vw;">
                                        <input name="salary" lay-verify="required" type="text" autocomplete="off" class="layui-input" >
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-card">
                            <div class="layui-card-header">基本信息</div>
                            <div class="layui-card-body">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">姓名</label>
                                    <div class="layui-input-inline" style="width: 20vw;">
                                        <input name="name" lay-verify="required" type="text" autocomplete="off" class="layui-input" >
                                    </div>

                                    <label class="layui-form-label">性别</label>
                                    <div class="layui-input-inline" style="width: 20vw;">
                                        <select name="sex" lay-search lay-verify="required">
                                            <option th:each="sex,stat:${application.sexList}"
                                                    th:text="${sex.value}"
                                                    th:value="${sex.value}"></option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">生日</label>
                                    <div class="layui-input-inline" style="width: 20vw;">
                                        <input name="birth" lay-verify="required" id="birth" type="text" autocomplete="off" class="layui-input">
                                    </div>
                                    <label class="layui-form-label">年龄</label>
                                    <div class="layui-input-inline" style="width: 20vw;">
                                        <input name="age" lay-verify="required|number" type="text" autocomplete="off" class="layui-input" >
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">邮箱</label>
                                    <div class="layui-input-inline" style="width: 20vw;">
                                        <input name="email" lay-verify="required|email" type="text" autocomplete="off" class="layui-input" >
                                    </div>
                                    <label class="layui-form-label">手机</label>
                                    <div class="layui-input-inline" style="width: 20vw;">
                                        <input name="phone" lay-verify="required|phone" type="text" autocomplete="off" class="layui-input" >
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">婚姻状态</label>
                                    <div class="layui-input-inline" style="width: 20vw;">
                                        <select name="marriage" lay-search lay-verify="required">
                                            <option th:each="marriage,stat:${application.marriageList}"
                                                    th:text="${marriage.value}"
                                                    th:value="${marriage.value}"></option>
                                        </select>
                                    </div>
                                    <label class="layui-form-label">政治面貌</label>
                                    <div class="layui-input-inline" style="width: 20vw;">
                                        <select name="political" lay-search lay-verify="required">
                                            <option th:each="political,stat:${application.politicalList}"
                                                    th:text="${political.value}"
                                                    th:value="${political.value}"></option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-card">
                            <div class="layui-card-header">个人经历</div>
                            <div class="layui-card-body">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">毕业院校</label>
                                    <div class="layui-input-block">
                                        <input name="college" lay-verify="required" type="text" autocomplete="off" class="layui-input" >
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">专业</label>
                                    <div class="layui-input-inline" style="width: 20vw;">
                                        <input name="major" lay-verify="required" type="text" autocomplete="off" class="layui-input" >
                                    </div>
                                    <label class="layui-form-label">学历</label>
                                    <div class="layui-input-inline" style="width: 20vw;">
                                        <select name="education" lay-search lay-verify="required">
                                            <option th:each="education,stat:${application.educationList}"
                                                    th:text="${education.value}"
                                                    th:value="${education.value}"></option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">工作经历</label>
                                    <div class="layui-input-block">
                                        <textarea name="experience" lay-verify="required" placeholder="请输入内容" autocomplete="off" class="layui-textarea" ></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-card">
                            <div class="layui-card-header">个人介绍</div>
                            <div class="layui-card-body">
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">技能专长</label>
                                    <div class="layui-input-block">
                                        <textarea name="technology" lay-verify="required" placeholder="请输入内容" autocomplete="off" class="layui-textarea" ></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">自我评价</label>
                                    <div class="layui-input-block">
                                        <textarea name="introduction" lay-verify="required" placeholder="请输入内容" autocomplete="off" class="layui-textarea" ></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" lay-filter="submit" lay-submit class="layui-btn">修改简历</button>
                                <a id="resumeHtml" target="_blank" th:href="@{/resume/detail}" class="layui-btn layui-btn-normal">生成简历</a>
                                <button type="button" id="copy" class="layui-btn layui-btn-normal">复制简历链接</button>
                                <button type="button" id="resetBtn" lay-submit class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div th:replace="front-common::footer"></div>
    </div>

</div>
<script th:inline="javascript">

    layui.use(['form','laydate'], function(){
        var form = layui.form;
        var laydate = layui.laydate;
        var $ = layui.jquery;

        laydate.render({
            elem: '#birth'
            ,value: [[${resumeInfo==null?'':resumeInfo.birth}]]
        });

        form.val("resumeForm", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
            "name": [[${resumeInfo==null?'':resumeInfo.name}]]
            ,"sex": [[${resumeInfo==null?'':resumeInfo.sex}]]
            ,"birth": [[${resumeInfo==null?'':resumeInfo.birth}]]
            ,"age": [[${resumeInfo==null?'':resumeInfo.age}]]
            ,"phone": [[${resumeInfo==null?'':resumeInfo.phone}]]
            ,"email": [[${resumeInfo==null?'':resumeInfo.email}]]
            ,"marriage": [[${resumeInfo==null?'':resumeInfo.marriage}]]
            ,"political": [[${resumeInfo==null?'':resumeInfo.political}]]
            ,"salary": [[${resumeInfo==null?'':resumeInfo.salary}]]
            ,"job": [[${resumeInfo==null?'':resumeInfo.job}]]
            ,"college": [[${resumeInfo==null?'':resumeInfo.college}]]
            ,"major": [[${resumeInfo==null?'':resumeInfo.major}]]
            ,"education": [[${resumeInfo==null?'':resumeInfo.education}]]
            ,"experience": [[${resumeInfo==null?'':resumeInfo.experience}]]
            ,"technology": [[${resumeInfo==null?'':resumeInfo.technology}]]
            ,"introduction": [[${resumeInfo==null?'':resumeInfo.introduction}]]
        });

        form.on('submit(submit)', function(data){
            var formFile = new FormData(document.getElementById('resumeForm'));
            $.ajax({
                url: '/resume/saveOrUpdate',
            type: 'post',
                dataType: 'json',
                data: formFile,
                cache: false,
                processData: false,
                contentType:false,
                success: function (data){
                    if(data.success){
                        layer.msg("修改成功");
                    }else {
                        layer.msg("修改失败，请稍后再试（"+data.msg+")");
                    }
                },
                error: function (data){
                    layer.msg("修改失败,"+data.responseJSON.msg);
                }
            });
            return false;
        });

        $("#resetBtn").click(function (){
            form.val("resumeForm", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                "name": [[${resumeInfo==null?'':resumeInfo.name}]]
                ,"sex": [[${resumeInfo==null?'':resumeInfo.sex}]]
                ,"birth": [[${resumeInfo==null?'':resumeInfo.birth}]]
                ,"age": [[${resumeInfo==null?'':resumeInfo.age}]]
                ,"phone": [[${resumeInfo==null?'':resumeInfo.phone}]]
                ,"email": [[${resumeInfo==null?'':resumeInfo.email}]]
                ,"marriage": [[${resumeInfo==null?'':resumeInfo.marriage}]]
                ,"political": [[${resumeInfo==null?'':resumeInfo.political}]]
                ,"salary": [[${resumeInfo==null?'':resumeInfo.salary}]]
                ,"job": [[${resumeInfo==null?'':resumeInfo.job}]]
                ,"college": [[${resumeInfo==null?'':resumeInfo.college}]]
                ,"major": [[${resumeInfo==null?'':resumeInfo.major}]]
                ,"education": [[${resumeInfo==null?'':resumeInfo.education}]]
                ,"experience": [[${resumeInfo==null?'':resumeInfo.experience}]]
                ,"technology": [[${resumeInfo==null?'':resumeInfo.technology}]]
                ,"introduction": [[${resumeInfo==null?'':resumeInfo.introduction}]]
            });
        })

        $("#copy").click(function (){
            var obj = document.getElementById("resumeHtml");
            var input = document.createElement("input");
            document.body.appendChild(input);
            input.value = obj.href;
            input.select();
            try{
                //进行复制到剪切板
                if(document.execCommand("Copy",false,null)){
                    //如果复制成功
                    alert("复制成功！");
                }else{
                    //如果复制失败
                    alert("复制失败！");
                }
            }catch(err){
                //如果报错
                alert("复制错误！")
            }
        })

        $("#img").change(function (){
            if(this.files.length){
                let file = this.files[0];
                let reader = new FileReader();
                reader.onload = function(){
                    // 当 FileReader 读取文件时候，读取的结果会放在 FileReader.result 属性中
                    $("#showImg").attr("src",this.result);
                };
                reader.readAsDataURL(file);
            }
        });

    })


    function onHiddenFile() {
        var dd = $("#img").val().split("\\");
        $("#showImgName").val(dd[dd.length - 1]);
    }
</script>
</body>

</html>